<template>
  <div>
    <div style="background: #fff; padding: 20px; box-sizing: border-box;">
      <a-row>
        <a-col :span="12">
          <!--          <a-select default-value="1号系统" style="width: 200px; margin-right: 30px;">-->
          <!--            <a-select-option value="1">-->
          <!--              1号系统-->
          <!--            </a-select-option>-->
          <!--            <a-select-option value="2">-->
          <!--              2号系统-->
          <!--            </a-select-option>-->
          <!--          </a-select>-->
          <a-input placeholder="请输入阀门号" v-model="valueNumber" style="width: 200px;margin-right: 20px;"/>
          <a-button type="primary" @click="search" style="background: #3C67F1;border: none;margin-right: 15px">
            查询
          </a-button>
          <a-button @click="reset" style="border-color: #3C67F1;color: #3C67F1;">重置</a-button>
        </a-col>
        <a-col :span="12" style="text-align: right;">
          <!--          <a-button type="primary" icon="appstore" @click="add" style="background: #3C67F1;border: none;">阀门操作记录-->
          <!--          </a-button>-->
        </a-col>
      </a-row>
    </div>
    <a-spin :spinning="spin" tip="加载中...">
      <a-skeleton :loading="spining" :paragraph="{ rows: 10 }"/>
      <a-empty style="margin-top: 10px" v-show="total==0"/>
      <div class="value">
        <div class="value-box" v-for="(item,index) in list" :key="index">
          <div class="value-top">
            <p style="width: 90px;display: flex;align-items: center;font-weight: bold;color: #4C537D;font-size: 14px;">
              <img
                style="width: 16px;height: 18px;margin-right: 4px;" src="../../../assets/icon/icon-16.png"/><span
              style="color: #1D79FA;font-size: 12px;width: 70px">{{ item.deviceName }}</span>
            </p>
            <p style="width: 55px;display: flex;font-size: 14px"
               :class="[item.deviceStatus === 'ONLINE' ? 'zc' : 'yc']">
              <img
                style="margin-right: 5px;"
                :src='item.deviceStatus === "ONLINE" ? require("../../../assets/icon/zc.png") : require("../../../assets/icon/yc.png")'/>
              {{ item.deviceStatus === "ONLINE" ? '正常' : '离线' }}</p>
          </div>
          <div class="value-cotent">
            <a-switch
              style="width: 50px;"
              :disabled="item.deviceStatus !='ONLINE'"
              v-model="item.deviceValue == '0' ? false : true"
              @change="onChange(item,index)"
            />
          </div>
        </div>
      </div>
    </a-spin>
    <div style="text-align: center;margin-top: 30px">
      <a-pagination v-model="pageNo" :page-size="pageSize" :total="total" @change="onShowSizeChange"/>
    </div>
    <OperationRecord ref="OperationRecord"></OperationRecord>
  </div>
</template>
<script>
import OperationRecord from './OperationRecord'
import {pageList} from '@/api/meteorological'
import {updateDeviceStatus} from '@/api/device'

export default {
  components: {
    OperationRecord
  },
  data() {
    return {
      list: [],
      pageNo: 1,
      total: 0,
      pageSize: 40,
      spin: false,
      valueNumber: '',
      spining: true,
      empty: false
    }
  },
  mounted() {
    this.dataList(this.valueNumber, this.pageNo, this.pageSize)
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize)
      this.pageSize = pageSize;
      this.dataList(this.valueNumber, this.pageNo, this.pageSize)
    },
    // 查询
    search() {
      this.dataList(this.valueNumber, this.pageNo, this.pageSize)
    },
    // 数据调用
    dataList(valueNumber, pageNo, pageSize) {
      this.spin = true
      pageList(valueNumber, pageNo, pageSize).then(res => {
        this.list = res.result.records
        this.total = res.result.total
        this.spin = false
        this.spining = false
      }).catch(err => {

      })
    },
    add() {
      this.$refs.OperationRecord.modal2Visible = true
    },
    onChange(index, e) {
      console.log(index, e)
      updateDeviceStatus(index.id).then(res => {
        this.$message.success(`阀门${index.deviceValue == '0' ? '开启' : '关闭'}成功`);
        this.dataList(this.valueNumber, this.pageNo, this.pageSize)
      }).catch(err => {
        this.$message.error('阀门操作失败');
      })
    },
    // 重置
    reset() {
      this.valueNumber = ''
      this.dataList(this.valueNumber, this.pageNo, this.pageSize)
    }
  }
}
</script>

<style scoped>
.value {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.value-box {
  width: 11%;
  height: 110px;
  border: 1px solid #89C1FB;
  background: #FFFFFF;
  margin: 10px 24px 10px 0;
  box-shadow: 1px 1px 8px 0px rgba(38, 75, 204, 0.25);
  border-radius: 10px;
  overflow: hidden;
}

.value-top {
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
  background: #EEF5FF;
  align-items: center;
}

.value-top p {
  margin: 0;
}

.value-cotent {
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 70px;
}

/deep/ .ant-skeleton-content .ant-skeleton-paragraph > li {
  background: #FFFFFF;
}

/deep/ .ant-switch-checked {
  background-color: #409EFF;
}

.yc {
  color: #FA6161;
}
</style>
